<template>
  <div class="szjythirdshuzi">
    <div
      style="
        position: absolute;
        right: 0;
        bottom: -2%;
        width: 20%;
        z-index: 9;
        text-align: right;
        font-size: 0.9rem;
      "
    >
      <p>总金额：{{ totalprice || 0 }}元</p>
      <p>当前{{ controlthirdindex || 0 }}页,每页10条,共{{ total || 0 }}条</p>
    </div>
    <div style="" class="szjythirdshuzitop">
      <div class="szjythirdshuzitop5">
        <el-input
          v-model="rwbhtext"
          clearable
          placeholder="任务编号"
        ></el-input>
      </div>
      <div class="szjythirdshuzitop5">
        <el-input
          v-model="rwmctext"
          clearable
          placeholder="任务名称"
        ></el-input>
      </div>
      <div class="szjythirdshuzitop6">
        <el-input placeholder="项目名称" clearable v-model="xmmctext">
          <i
            slot="suffix"
            class="el-input__icon el-icon-more"
            @click="clickiconxmmc"
          ></i>
        </el-input>
      </div>
      <div class="szjythirdshuzitop6">
        <el-input placeholder="需求单位" clearable v-model="xqdwtext">
          <i
            slot="suffix"
            class="el-input__icon el-icon-more"
            @click="clickiconxqdw"
          ></i>
        </el-input>
      </div>
      <div class="szjythirdshuzitop2">
        <Select
          v-model="kflxchbd"
          clearable
          placeholder="开标类型/采购标的"
          @visible-change="mouseClick"
        >
          <el-option
            v-for="item in $store.state.projectlistarr"
            :key="item.object"
            :label="item.title"
            :value="item.object"
          >
          </el-option>
          <!-- <template slot="suffix">
            <i slot="suffix" class="el-icon-caret-bottom"></i>
          </template> -->
        </Select>
      </div>
      <div class="szjythirdshuzitop2">
        <Select
          v-model="cgfsprotype"
          clearable
          placeholder="采购方式"
          @visible-change="mouseClick"
        >
          <el-option
            v-for="item in cgfslist"
            :key="item.proctype"
            :label="item.procname"
            :value="item.proctype"
          >
          </el-option>
        </Select>
      </div>
      <div class="szjythirdshuzitop2">
        <el-input
          v-model="zbdwtext"
          clearable
          placeholder="中标单位"
        ></el-input>
      </div>
      <div class="szjythirdshuzitop9">
        <!-- <div class="style5">
          <dataPicker
            v-model="erjiszjythirdspopdatapicker"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :editable="false"
            value-format="yyyy-MM-dd"
            clearable
            prefix-icon="el-icon-caret-bottom"
            rotateable
          />
        </div> -->

        <div class="custom4">
          <div class="time">
            <el-date-picker
            :picker-options="pickerOptions0"
              v-model="erjiszjythirdspopdatapicker[0]"
              type="date"
              :editable="false"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="开始日期"
              @focus="handleOperation(true)"
              @blur="handleOperation(false)"
            >
            </el-date-picker>
            <span style="line-height: 40px">-</span>
            <el-date-picker
            :picker-options="pickerOptions1"
              v-model="erjiszjythirdspopdatapicker[1]"
              type="date"
              :editable="false"
              clearable
              value-format="yyyy-MM-dd"
              placeholder="结束日期"
              @focus="handleOperation(true)"
              @blur="handleOperation(false)"
            >
            </el-date-picker>
            <div
              class="icon"
              :class="rotate ? 'transform180' : 'transform0'"
            ></div>
          </div>
        </div>

        <!-- <div
          class="jiantoudatepiackerzjjythird"
          style="width: calc(100% - 55px)"
        >
          <YYDatePick
            range
            :highlight-range="true"
            :to-body="false"
            v-model="erjiszjythirdspopdatapicker"
            :title="erjiszjythirdspopdatapicker"
            clearable
          ></YYDatePick>
        </div> -->
        <!-- <el-date-picker
          v-model="erjiszjythirdspopdatapicker"
          :editable="false"
          type="daterange"
          range-separator="-"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          prefix-icon=" "
          :title="erjiszjythirdspopdatapicker"
          style="width: 79%;"
        >
        </el-date-picker> -->
        <div style="margin-left: 1%; height: 100%">
          <el-button
            v-debounce
            style="color: white; background-color: #0000ff; height: 40px"
            size="mini"
            @click="searchtable(true)"
            >搜索</el-button
          >
        </div>
      </div>
    </div>
    <div style="height: calc(100% - 130px)">
      <div style="width: 100%; height: 100%">
        <Zjjytableshuzi :tableData="alldata" :currentPage="controlthirdindex" />
      </div>
      <el-pagination
        background
        align="center"
        @current-change="alldatacurrentpage"
        :current-page="controlthirdindex"
        :page-size="pageSize"
        layout="total,prev,pager,next,jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!-- //项目名称弹框 -->
    <Dialog :modalVisible="xmmcvisiable" :title="xmmcpoptitle" indexceng="105">
      <template>
        <Xmmcdialog @xmmcevent="xmmcevent" />
      </template>
    </Dialog>

    <!-- //需求单位弹框 -->
    <Dialog :modalVisible="xqdwvisiable" :title="xqdwpoptitle" indexceng="105">
      <template>
        <Xqdwdialog @xmdwevent="xmdwevent" />
      </template>
    </Dialog>
  </div>
</template>

<script>
import Szjjdjlbdialog from "@/components/szjjdjlbdialog.vue";
import Basetables from "@/components/tablemain.vue";
import Dialog from "@/components/dialog.vue";
import Dialogback from "@/components/dialogback.vue";
import Zjjytableshuzi from "@/components/zjjytableshuzi.vue";
import Xmmcdialog from "@/components/xmmcdialog.vue";
import Xqdwdialog from "@/components/xqdwdialog.vue";
import APIS from "@/api/index";
import { Message } from "element-ui";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
import Select from "@/components/select/index.js";

// import select from "@/components/select";
export default {
  components: {
    Basetables,
    Dialog,
    Szjjdjlbdialog,
    Dialogback,
    Zjjytableshuzi,
    Xmmcdialog,
    Xqdwdialog,
    YYDatePick,
    dataPicker,
    Select,
    // select
  },
  props: {
    morenzhi: "",
    type: 0,
  },
  data() {
    return {
      pickerOptions0: {
        disabledDate: (time) => {
          if (this.erjiszjythirdspopdatapicker[1]) {
            return time.getTime() > new Date(this.erjiszjythirdspopdatapicker[1]).getTime();
          }
        },
      },
      pickerOptions1: {
        disabledDate: (time) => {
          return time.getTime() < new Date(this.erjiszjythirdspopdatapicker[0]).getTime() ;
        },
      },
      prevdata: true,
      totalprice: "",
      alldata: [],
      xqdwzzmc: "",
      xzxmrwmctext: "",
      xzxmxmbhtext: "",
      cgfslist: [],
      kflxchbd: "",
      cgfsprotype: "",
      dianjiliebiaocode: "111",
      dianjiliebiaoid: "",
      erjiszjythirdspopdatapicker: [],
      processSelect: {},
      processSelect1: {},
      xmmctreedata: [],
      xqdwtreedata: [],
      defaultProps: {
        children: "children",
        label: "title",
      },
      xmmcvisiable: false,
      xmmcpoptitle: "",
      xqdwvisiable: false,
      xqdwpoptitle: "",
      liebiaodianjivisiable: false,
      liebiaodianjipoptitle: "",
      pageNum: 1,
      pageSize: 10,
      total: 1,
      total1: 1,
      total2: 1,
      rwbhtext: "",
      rwmctext: "",
      xmmctext: "",
      xqdwtext: "",
      zbdwtext: "",
      xmbhtext: "",
      tableData: [],
      tableDataxqdw: [],
      xzxmobj: {},
      pageNum1: 1,
      xqdworgcode: "",
      xqdwobj: {},
      controlthirdindex: 1,
      rowobj: {},
      currentindex: 1,
      timer: null,
      rotate: false,
    };
  },
  watch: {
    rwbhtext(newVal, oldVal) {
      console.log(newVal, oldVal, "newVal, oldVal");
      this.currentindex = 1;
    },
    rwmctext(newVal, oldVal) {
      this.currentindex = 1;
    },
    kflxchbd(newVal, oldVal) {
      this.currentindex = 1;
    },
    cgfsprotype(newVal, oldVal) {
      this.currentindex = 1;
    },
    zbdwtext(newVal, oldVal) {
      this.currentindex = 1;
    },
    erjiszjythirdspopdatapicker(newVal, oldVal) {
      if (newVal[1] == undefined || newVal[1] == null) {
        this.erjiszjythirdspopdatapicker = oldVal;
      }
      this.currentindex = 1;
    },

    xqdwtext(newVal, oldVal) {
      if (!newVal) {
        this.xqdwobj = {};
      }
      this.currentindex = 1;
    },
    xmmctext(newVal, oldVal) {
      if (newVal != oldVal) {
        this.currentindex = 1;
      }
    },
  },
  mounted() {
    if (this.morenzhi.length == 0) {
      this.erjiszjythirdspopdatapicker = ["", ""];
    } else {
      this.erjiszjythirdspopdatapicker = this.morenzhi;
    }
    this.getcgfslist();
    this.searchtable(true);
  },
  methods: {
    handleOperation(e) {
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        this.rotate = e;
      }, 150);
    },
    mouseClick(e) {
      if (e) {
        var clickEvent = document.createEvent("MouseEvents");
        clickEvent.initEvent("click", false, false);
        document.dispatchEvent(clickEvent);
      }
    },
    xmmcevent(value) {
      this.xmmctext = value.title;
      this.xzxmobj = value;
      this.xmmcvisiable = false;
      console.log(value, "value", this.xmmctext, this.xzxmobj);
    },
    xmdwevent(value) {
      console.log(value, "value", this.xqdwtext, this.xqdwobj);
      this.xqdwtext = value.title;
      this.xqdwobj = value;
      this.xqdwvisiable = false;
    },
    gettotalprice(data) {
      APIS.Szjy.getTotalPrice(data).then((res) => {
        this.totalprice = res.data;
      });
    },
    searchtable(prevdata) {
      this.alldata = [];
      // if (!this.erjiszjythirdspopdatapicker) {
      //   this.erjiszjythirdspopdatapicker = ["", ""];
      // }
      let data = {};
      let alldataarr = [];
      let objectType1 = "";
      if (this.kflxchbd != 0) {
        objectType1 = this.kflxchbd;
      } else {
        objectType1 = "";
      }

      let xmmctext1 = "";
      if (this.xmmctext != this.xzxmobj.title) {
        xmmctext1 = this.xmmctext;
      } else {
        xmmctext1 = this.xzxmobj.title;
      }
      console.log(xmmctext1, "xmmctext1");

      this.controlthirdindex = this.currentindex;
      if (prevdata) {
        console.log(this.erjiszjythirdspopdatapicker, "jinlai");
        data = {
          objectType: objectType1, //标的编码
          // orgCode: this.$store.state.orgCode, //组织编码
          orgName: this.xqdwtext || this.xqdwobj.title, //组织名称
          pageNum: this.controlthirdindex,
          pageSize: 10,
          procType: this.cgfsprotype, //采购方式
          projectName: xmmctext1, //项目名称
          resultPubEndDate: this.erjiszjythirdspopdatapicker
            ? this.erjiszjythirdspopdatapicker[1]
            : "", //结果发布结束时间
          resultPubStartDate: this.erjiszjythirdspopdatapicker
            ? this.erjiszjythirdspopdatapicker[0]
            : "", //结果发布开始时间
          supplierName: this.zbdwtext, //中标单位
          tenderCode: this.rwbhtext, //任务编码
          tenderName: this.rwmctext, //任务名称
          type: this.type || "", //公开 邀请 其他
        };
      } else {
        console.log("chuuq");
        data = this.prevdata;
      }
      console.log(data, "data");

      this.prevdata = data;
      //  data = {
      //   objectType: this.kflxchbd, //标的编码
      //   orgCode: this.$store.state.orgCode, //组织编码
      //   orgName: this.xqdwobj.title, //组织名称
      //   pageNum: this.controlthirdindex,
      //   pageSize: 10,
      //   procType: this.cgfsprotype, //采购方式
      //   projectName: this.xzxmobj.title || this.xmmctext, //项目名称
      //   resultPubEndDate: this.erjiszjythirdspopdatapicker[1] || "", //结果发布结束时间
      //   resultPubStartDate: this.erjiszjythirdspopdatapicker[0] || "", //结果发布开始时间
      //   supplierName: this.zbdwtext, //中标单位
      //   tenderCode: this.rwbhtext, //任务编码
      //   tenderName: this.rwmctext, //任务名称
      //   type: this.type || "", //公开 邀请 其他
      // };

      this.gettotalprice(data);
      // tenderList
      APIS.Szjy.tenderList(data)
        .then((res) => {
          this.total = res.data.total;
          // res.data.items.map((item, index) => {
          //   APIS.Szjy.getObject({ objectType: item.objectType })
          //     .then((res) => {
          //       Object.assign(item, {
          //         objectTypename: res.data.objectname,
          //       });
          //       APIS.Szjy.getProcType({
          //         objectType: item.objectType,
          //         procType: item.procType,
          //       })
          //         .then((res1) => {
          //           Object.assign(item, {
          //             projectTypename: res1.data.procname,
          //           });
          //           alldataarr.push(item);
          //         })
          //         .catch((err) => {
          //           console.log(err);
          //         });
          //     })
          //     .catch((err) => {
          //       console.log(err);
          //     });
          // });
          this.alldata = res.data.items;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    searchxqdw() {
      this.pageNum1 = 1;
      // xqdwzzmc
      this.gettableDataxqdw({ orgName: this.xqdwzzmc });
    },
    submitxqdw() {
      this.xqdwtext = this.xqdwobj.title;
      this.xqdwvisiable = false;
    },
    goodspagechange(currentPage) {
      this.pageNum1 = currentPage;
      this.gettableDataxqdw({ orgName: this.xqdwzzmc });
      this.$refs.processDataTable1.bodyWrapper.scrollTop = 0;
    },
    alldatacurrentpage(currentPage) {
      this.currentindex = currentPage;
      this.prevdata.pageNum = currentPage;
      this.searchtable(false);
    },
    gettableData(data1) {
      let data = {};
      data = {
        ...data1,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orgCode: this.xzxmorgcode,
      };
      APIS.Baseapi.getPageOrg(data)
        .then((res) => {
          this.tableData = res.data.items;
          this.total1 = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // getxmmctreedata() {
    //   APIS.Baseapi.getProjectOrgTree({ code: this.$store.state.orgCode })
    //     .then((res) => {
    //       this.xmmctreedata = res.data[0].children;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    // getxqdwtreedata() {
    //   APIS.Baseapi.getOrgTree({ code: this.$store.state.orgCode })
    //     .then((res) => {
    //       this.xqdwtreedata = res.data;
    //     })
    //     .catch((err) => {
    //       console.log(err);
    //     });
    // },
    getcgfslist() {
      APIS.Baseapi.getProcurementMethod()
        .then((res) => {
          this.cgfslist = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    closepopup() {
      this.pageNum = 1;
      this.pageNum1 = 1;
      this.xmmcvisiable = false;
      this.xqdwvisiable = false;
      this.liebiaodianjivisiable = false;
    },
    processSelectChange(selection, row) {
      // 清除 所有勾选项
      this.$refs.processDataTable.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.processDataTable.toggleRowSelection(row, true);
      this.xzxmobj = row;
    },
    processSelectChange1(selection, row) {
      // 清除 所有勾选项
      this.$refs.processDataTable1.clearSelection();
      // 当表格数据都没有被勾选的时候 就返回
      // 主要用于将当前勾选的表格状态清除
      if (selection.length == 0) return;
      this.$refs.processDataTable1.toggleRowSelection(row, true);
      this.xqdwobj = row;
    },
    handleSelectionChange(val) {
      // this.processSelect = val;
      console.log(val, "val");
      // this.rowClick(val)
    },
    rowClick(row, column) {
      console.log(row, "row");
      const selectData = this.processSelect;
      this.$refs.processDataTable.clearSelection();
      if (selectData.length == 1) {
        selectData.forEach((item) => {
          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item == row) {
            this.$refs.processDataTable.toggleRowSelection(row, false);
          }
          // 不然就让当前的一行勾选
          else {
            this.$refs.processDataTable.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.processDataTable.toggleRowSelection(row, true);
      }
      this.xzxmobj = row;
    },
    xzxmsubmit() {
      console.log(this.xzxmobj, "this.xzxmobj");
      this.xmmctext = this.xzxmobj.title;
      this.xmmcvisiable = false;
    },
    handleSelectionChange1(val) {
      this.processSelect1 = val;
    },
    rowClick1(row, column) {
      console.log(row, "row1");
      const selectData = this.processSelect1;
      this.$refs.processDataTable1.clearSelection();
      if (selectData.length == 1) {
        selectData.forEach((item) => {
          // 判断 如果当前的一行被勾选, 再次点击的时候就会取消选中
          if (item == row) {
            this.$refs.processDataTable1.toggleRowSelection(row, false);
          }
          // 不然就让当前的一行勾选
          else {
            this.$refs.processDataTable1.toggleRowSelection(row, true);
          }
        });
      } else {
        this.$refs.processDataTable1.toggleRowSelection(row, true);
      }
      this.xqdwobj = row;
    },
    handleNodeClick1(data) {
      console.log(data);
      this.pageNum1 = 1;
      this.xqdworgcode = data.orgcode;
      this.gettableDataxqdw();
    },
    gettableDataxqdw(data1) {
      let data = {};
      data = {
        ...data1,
        pageNum: this.pageNum1,
        pageSize: this.pageSize,
        orgCode: this.xqdworgcode,
      };
      APIS.Baseapi.getPageOrg(data)
        .then((res) => {
          this.tableDataxqdw = res.data.items;
          this.total2 = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    clickiconxmmc() {
      this.xmmcvisiable = true;
    },
    clickiconxqdw() {
      this.xqdwzzmc = "";
      this.pageNum = 1;
      // this.getxqdwtreedata();
      // this.gettableDataxqdw({ orgCode: this.$store.state.orgCode });
      this.xqdwvisiable = true;
      this.xqdwpoptitle = "选择组织机构";
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
 
<style lang="scss">
.szjythirdshuzi {
  width: 98%;
  height: 95%;
  font-size: 1rem;
  margin: 0 auto;
  position: relative;

  .szjythirdshuzitop {
    width: 100%;
    height: 90px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
    .szjythirdshuzitop1 {
      width: 22%;
      .el-input__inner {
        border: 1px solid #0000ff;
        background-color: transparent;
        color: #0000ff;
      }
      .el-input__suffix {
        top: 20%;
        font-size: 18px;
        color: #0000ff;
      }
      .el-input__inner::placeholder {
        color: #0000ff;
      }
    }
  }
}

.xmmctablecheckbox {
  .el-checkbox__inner {
    border-radius: 50%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0000ff;
    border-color: #0000ff;
  }
  .el-table .el-table__cell {
    padding: 0.4rem 0;
  }
  .el-table__body {
    height: 100%;
  }
}
.xmmctablecheckbox1 {
  .el-checkbox__inner {
    border-radius: 50%;
  }
  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #0000ff;
    border-color: #0000ff;
  }
  .el-table .el-table__cell {
    padding: 0.4rem 0;
  }
}
.szjythirdshuzitop2 {
  width: 22%;
  .el-select {
    width: 100%;
  }
  .el-input__inner {
    border: 1px solid #0000ff;
    background-color: transparent;
    color: #0000ff;
  }
  .el-select .el-input__inner:focus {
    border: 1px solid #0000ff;
  }
  .el-select:hover .el-input__inner {
    border: 1px solid #0000ff;
  }
  .el-input__inner::placeholder {
    color: #0000ff;
  }
  .el-icon-arrow-up:before {
    content: "▲";
    color: #0054f9;
  }
}
.szjythirdshuzitop5 {
  width: 22%;
  .el-input__inner {
    border: 1px solid #0000ff;
    background-color: transparent;
    color: #0000ff;
  }
  .el-input__inner::placeholder {
    color: #0000ff;
  }
}

.szjythirdshuzitop6 {
  width: 22%;
  .el-input__inner {
    border: 1px solid #0000ff;
    background-color: transparent;
    color: #0000ff;
  }
  .el-input__suffix {
    color: #0000ff;
  }
  .el-input__inner::placeholder {
    color: #0000ff;
  }
}
.szjythirdshuzitop9 {
  width: 22%;
  display: flex;
  align-items: center;
  // .el-range-editor.el-input__inner {
  //   border: 1px solid #0000ff;
  //   background-color: transparent;
  //   color: #0000ff;
  //   justify-content: space-between;
  // }
  // .el-date-editor .el-range-input {
  //   text-align: left;
  //   background-color: transparent;
  //   color: #0000ff;
  // }
  // .el-range-input::placeholder {
  //   color: #0000ff;
  // }
  // ::v-deep .el-button--mini {
  //   padding: 0;
  // }
  .custom4 {
    // height: 1.2rem;
    border: 1px solid blue;
    border-radius: 4px;
    padding-right: 1rem;
    box-sizing: border-box;
    width: calc(100% - 2.75rem);

    .time {
      .transform180 {
        transform: rotate(180deg);
        transition: all 0.5s;
      }
      .transform0 {
        transform: rotate(0deg);
        transition: all 0.5s;
      }
      .icon {
        display: flex;
        align-items: center;
      }
      .icon::before {
        content: "▼";
        font-size: 12px;
        color: #0054f9;
      }
      display: flex;
      align-content: center;

      .el-input__prefix {
        display: none;
      }
      .el-input__inner {
        padding: 0 1rem;
        border: none;
        background-color: transparent;
        position: relative;
        font-size: 14px;
        color: #0000ff;
      }
      .el-input__inner::placeholder {
        font-size: 14px;
        color: #0000ff;
      }
      .el-range-editor .el-range-input {
        color: #0000ff;
        background-color: transparent;
      }
      .el-date-editor .el-range__close-icon {
        margin-right: 0.5rem;
      }
    }
  }
}

// .style5 {
//   width: calc(100% - 2.75rem);
//   display: flex;
//   .el-date-editor el-range-editor el-input__inner el-date-editor--monthrange {
//     width: calc(100% - 2.75rem);
//   }
//   .el-icon-caret-bottom:before {
//     content: "▼";
//     font-size: 14px;
//     color: #0000ff;
//   }
//   .el-range__icon {
//     width: 1.2rem;
//     height: 1.2rem;
//     position: absolute;
//     // top: 50%;
//     margin-left: calc(100% - 1.9rem);
//     // transform: translate(-50%, -50%);
//   }
//   .el-range-editor.el-input__inner {
//     padding: 0 15px;
//   }
//   .el-input__inner {
//     font-family: JCYT;
//     border: none;
//     // border-bottom: 0.05rem solid #0000ff;
//     background-color: transparent;
//     // padding-left: 0.5rem;
//     position: relative;
//     font-size: 0.8rem;
//   }
//   .el-range-input {
//     background: transparent;
//     color: #0000ff;
//   }
//   .el-input__icon {
//     line-height: 0.3rem;
//     width: 1rem;
//     height: 1rem;
//   }
//   .el-range-separator {
//     display: flex;
//     align-items: center;
//     justify-content: space-around;
//     color: #0000ff;
//   }
//   .el-range__close-icon {
//     line-height: 0.3rem;
//     margin-right: 0.3rem;
//   }
// }
</style>
 

